import type { OrderManageOptionsStateType } from './typings'
import { defineComponent, ref, reactive, onMounted } from 'vue'
import { useStore } from 'vuex'
import { ElCard, ElTabs, ElTabPane, ElDivider, ElSpace, ElButton } from 'element-plus'
import AliIcon from '~/components/AliIocn'
import OrderInfo from '../components/orderTabs/OrderInfo'
import RelatedAudits from '../components/orderTabs/RelatedAudits'
import GisMap from '../components/orderTabs/GisMap'
import MaintenanceHistory from '../components/orderTabs/MaintenanceHistory'
import OperationRecord from '../components/orderTabs/OperationRecord'
import OptionButtonEvent from '../components/orderTabs/optionButtonEvent'
import styles from '../index.module.scss'

export default defineComponent({
  name: 'OrderManageOptions',
  props: ['visible', 'record', 'cancel'],
  setup(props) {
    const operationRecordRef = ref()
    const store = useStore()
    const state = reactive<OrderManageOptionsStateType>({
      activeTabKey: 'info',
      orderInfo: {},
      processRecordList: []
    })
    // 获取操作记录列表
    const handleGetProcessRecordListByBusinessKey = async () => {
      const res = await store.dispatch('order/GetOrderManageProcessRecordListByBusinessKey', {
        businessKey: props.record.id
      })
      state.processRecordList = res?.data || []
    }

    // 获取工单详情 businessKey 就是工单id
    const handleGetOrderInfoById = async () => {
      const res = await store.dispatch('order/GetOrderInfo', { id: props.record.id })
      state.orderInfo = res?.data || {}
    }
    // 点击操作按钮的回调
    const handleClickOptionButton = (identType: string) => {
      state.clickOptionButtonType = {
        identType
      }
    }
    //  返回
    // const goBack = () => {
    //   router.go(-1)
    // }

    onMounted(() => {
      handleGetProcessRecordListByBusinessKey()
      Promise.all([handleGetOrderInfoById()]).then(() => {
        // 获取操作列表
        operationRecordRef.value?.searchOperationRecordList()
      })
    })
    return () => (
      <ElCard class={styles['order-card']}>
        <ElSpace class={styles['order-tab-option-btns']}>
          <ElButton text type="primary" onClick={props.cancel}>
            返回上一级&nbsp;
            <AliIcon type="icon-fanhuishangyiji" />
          </ElButton>
        </ElSpace>
        <ElTabs v-model={state.activeTabKey}>
          <ElTabPane name="info" label="工单详情">
            <OrderInfo
              annexUrlArray={state.orderInfo.annexUrl ? state.orderInfo.annexUrl!.split(',') : []}
              processRecordList={state.processRecordList}
              {...state.orderInfo}
            />
          </ElTabPane>
          <ElTabPane name="relatedAudits" label="相关审核" lazy>
            <RelatedAudits />
          </ElTabPane>
          <ElTabPane name="gisMap" label="GIS地图" lazy>
            <GisMap processRecordList={state.processRecordList} />
          </ElTabPane>
          <ElTabPane name="maintenanceHistory" label="维修历史" lazy>
            <MaintenanceHistory />
          </ElTabPane>
          <ElTabPane name="operation" label="操作记录" lazy>
            <OperationRecord
              ref={operationRecordRef}
              detail={state.orderInfo}
              processRecordList={state.processRecordList}
            />
          </ElTabPane>
        </ElTabs>
        {/* 暂定只有0 其他的还没拓展接口 */}
        {/* {state.orderInfo?.orderStatus !== 5 && ( */}
        {state.orderInfo?.orderStatus === 0 && (
          <>
            <ElDivider />
            <ElSpace class={styles['option-button-list']}>
              {/* 待发送 */}
              {state.orderInfo?.orderStatus === 0 && (
                <>
                  <ElButton type="primary" onClick={() => handleClickOptionButton('order_update')}>
                    编辑
                  </ElButton>
                  <ElButton type="primary" onClick={() => handleClickOptionButton('order_send')}>
                    发送
                  </ElButton>
                  <ElButton type="danger" onClick={() => handleClickOptionButton('order_delete')}>
                    删除
                  </ElButton>
                </>
              )}
              {/* 待确认 */}
              {/* {state.orderInfo?.orderStatus === 1 && (
                <>
                  <ElButton type="primary" onClick={() => handleClickOptionButton('order_confirm')}>
                    确认工单
                  </ElButton>
                </>
              )} */}
              {/* 待处理 */}
              {/* {state.orderInfo?.orderStatus === 2 && (
                <>
                  <ElButton
                    type="primary"
                    // 暂未开发
                    // onClick={() => handleClickOptionButton('order_confirm')}
                  >
                    约时
                  </ElButton>
                  <ElButton type="primary" onClick={() => handleClickOptionButton('order_handle')}>
                    处理工单
                  </ElButton>
                </>
              )} */}
              {/* 待终结 */}
              {/* {state.orderInfo?.orderStatus === 3 && (
                <>
                  <ElButton type="primary" onClick={() => handleClickOptionButton('order_over')}>
                    终结
                  </ElButton>
                </>
              )} */}
              {/* 待归档 */}
              {/* {state.orderInfo?.orderStatus === 4 && (
                <>
                  <ElButton type="primary" onClick={() => handleClickOptionButton('order_plfile')}>
                    归档
                  </ElButton>
                </>
              )} */}
              {/* 非待发送和完成状态都都有回退按钮 */}
              {/* {state.orderInfo?.orderStatus !== 0 && state.orderInfo?.orderStatus !== 5 && (
                <ElButton type="primary" onClick={() => handleClickOptionButton('order_back')}>
                  回退
                </ElButton>
              )} */}
            </ElSpace>
          </>
        )}
        <OptionButtonEvent
          detail={state.orderInfo}
          cancel={props.cancel}
          clickOptionButtonType={state.clickOptionButtonType}
          clearClickOptionButtonType={() => {
            state.clickOptionButtonType = undefined
          }}
        />
      </ElCard>
    )
  }
})
